import { Carousel } from 'antd';
import { HTMLDecode } from '@/utils';
// css
import styles from '@/styles/AboutUs.module.scss';
import Breadcrumb from '@/components/Breadcrumb';
// api
import { companyPage_SSR } from '@/ssr';

const AboutUs = ({ ssr, imgs }) => {
    
    const date = new Date(),
          dateArr = date.toLocaleDateString().split('/');
    const _dateArr = [dateArr[0], '年', dateArr[1], '月', dateArr[2], '日'];

    return (
        <div className={styles['about-us-page']}>
            <div className="max-content">
                <Breadcrumb params={[
                    { name: '关于我们', url: '/about_us' },
                ]} />
                <div className={styles['content-us']}>
                    <h3 className={styles['level-1-title']}>
                        公司简介 <span>{_dateArr.join('')} {date.toLocaleTimeString().slice(0,-3)}</span>
                    </h3>
                    <div className={styles['ssr']}>
                        {
                            imgs.length ?
                            <>
                                <img className={styles['empty-img']} align="right" />
                                <div className={styles['slider']}>
                                    <Carousel autoplay>
                                        {
                                            imgs.map((img,index) => <div key={index}><img src={img} alt="" /></div>)
                                        }
                                    </Carousel>
                                </div>
                            </> : ""
                        }
                        { 
                            ssr.map((item, index) => <div key={index} dangerouslySetInnerHTML={{__html: HTMLDecode(item.value)}}></div>)
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

// 获取数据，ssr
AboutUs.getInitialProps = async () => {
  const { ssr, imgs } = await companyPage_SSR(261);
  return { ssr, imgs }
}

export default AboutUs